<script setup lang="ts">
import { useNav } from '@/layout/hooks/useNavbar'
import { useEcharts } from '@/hooks/useEcharts'
import { type PropType, ref, computed, watch, nextTick } from 'vue'

const props = defineProps({
  requireData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  },
  questionData: {
    type: Array as PropType<Array<number>>,
    default: () => []
  }
})

const { isDark } = useNav()

const theme = computed(() => (isDark.value ? 'dark' : 'light'))

const chartRef = ref()
const { setOptions } = useEcharts(chartRef, {
  theme
})

watch(
  () => props,
  async () => {
    await nextTick() // 确保DOM更新完成后再执行
    setOptions({
      container: '.bar-card',
      color: ['#41b6ff', '#e85f33'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        }
      },
      grid: {
        top: '20px',
        left: '50px',
        right: 0
      },
      legend: {
        data: ['需求人数', '提问数量'],
        textStyle: {
          color: '#606266',
          fontSize: '0.875rem'
        },
        bottom: 0
      },
      xAxis: [
        {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            fontSize: '0.875rem'
          },
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          axisLabel: {
            fontSize: '0.875rem'
          },
          splitLine: {
            show: false // 去网格线
          }
          // name: "单位: 个"
        }
      ],
      series: [
        {
          name: '需求人数',
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            color: '#41b6ff',
            borderRadius: [10, 10, 0, 0]
          },
          data: props.requireData
        },
        {
          name: '提问数量',
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            color: '#e86033ce',
            borderRadius: [10, 10, 0, 0]
          },
          data: props.questionData
        }
      ]
    })
  },
  {
    deep: true,
    immediate: true
  }
)
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 365px" />
</template>
